<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none}
        .top{width: 100%;line-height: 40px;height: 40px;background: #ccc;}
        .top ul{display: flex}
        .top ul li{flex: 1;border: solid 1px black}

        .cont{height: 300px;background: pink}

        .footer{height: 50px;background: #aaa;line-height: 50px;font-size: 20px;text-indent: 30px;}
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="cont">
        <h1>首页</h1>
        内容区域
    </div>
    <div class="footer"></div>
</body>
<script src="../../jquery.js"></script>
<script>
    // 使用jq的load方法请求页面的公共结构
    var a = $(".top").load("./public/data.html .navBox",function(res, state, xhr){
        // 回调函数表示请求成功
        // 在此处可以操作请求到的DOM内容
        console.log(res)
        console.log(state)
        console.log(xhr)
    });
    console.log(a)
    
    // 利用事件委托给页面上暂时不存在的元素绑定事件
    // $(".top").on("click","li",function(){
    //     console.log(this)
    // })


    // $(".top").load("./public/data.html .navBox",function(){
    //     fn()
    // })
    // function fn(){
    //     $(".top").find("li").click(function(){
    //         console.log(this)
    //     })
    // }

    
    $(".footer").load("./public/data.html .bottom")


    

</script>
</html>